<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: #6ff;
      margin: 50px;
    }

    /* .box:hover{
            background-color: #f00;
        } */
  </style>
</head>

<body>
  <div class="box"></div>
  <!-- <a href="">baidu</a> -->
</body>
<script>
  var box = document.getElementsByClassName("box")[0];

  // onclick      鼠标单击 (按下,抬起来)
  // ondblclick   鼠标双击 (鼠标左键  按下,抬起来) 
  // onmousedown  鼠标按下
  // onmouseup    鼠标抬起 (左键 中键 右键 侧键 抬起时触发)
  // onmousemove  鼠标移动时 (鼠标在绑定事件的元素上移动时触发)
  // onmouseover  鼠标划入触发
  // onmouseout   鼠标划出触发

  // onclick  鼠标单击 (鼠标左键 按下,抬起来)
  // box.onclick = function(){
  //     this.style.background = "red";
  // }


  // ondblclick  鼠标双击 (按下,抬起来) 
  // box.ondblclick = function(){
  //     this.style.background = "blue";
  // }

  // onmousedown  鼠标按下 (左键 中键 右键 侧键  按下时触发)
  /* box.onmousedown = function(e){  // event evt e 事件对象(记录事件发生时的信息)
      this.style.background = "red";

      // 事件出发时的鼠标按键  
      // button   0(左)   1(中)    2(右)    3(侧键)   4(侧键)
      console.log("鼠标按下",e.button);
  }  */

  // onmouseup  鼠标抬起 (左键 中键 右键 侧键  抬起时触发)
  /* box.onmouseup = function(e){  // event evt e 事件对象(记录事件发生时的信息)
      this.style.background = "#6ff";

      // 事件出发时的鼠标按键  
      // button   0(左)   1(中)    2(右)    3(侧键)   4(侧键)
      console.log("鼠标抬起",e.button);
  }  */

  // box.onmousemove = function(){
  //     console.log("moving");
  // }

  // onmouseover   鼠标划入触发
  box.onmouseover = function () {
    console.log("鼠标划入");
    this.style.background = "red";
  }
  // onmouseout   鼠标划入触发
  box.onmouseout = function () {
    console.log("鼠标划出");
    this.style.background = "#6ff";
  }

  // onmousewheel  滑轮滚动 
  document.onmousewheel = function () {
    console.log("滑轮滚动");
  }



</script>

</html>